{{ title 'Categories' }}

<div class="crates-heading">
  {{svg-jar "crate"}}
  <h1>All Categories</h1>
</div>

<div id='results'>
  <div class='nav' data-test-categories-nav>
    <span class='amt small'>
      Displaying
      <span class='cur'>{{ this.currentPageStart }}-{{ this.currentPageEnd }}</span>
      of <span class='total'>{{ this.totalItems }}</span> total results
    </span>
  </div>

  <div class='sort' data-test-categories-sort>
    <span class='small'>Sort by</span>
    <Dropdown class="dropdown-container" as |dd|>
      <dd.Trigger class="dropdown dropdown-button" data-test-current-order>
        {{svg-jar "sort"}}
        {{ this.currentSortBy }}
        <span class='arrow'></span>
      </dd.Trigger>

      <dd.Content @tagName="ul" class="dropdown">
        <li>
          <LinkTo @query={{hash sort="alpha"}}>
            Alphabetical
          </LinkTo>
        </li>
        <li>
          <LinkTo @query={{hash sort="crates"}}>
            # Crates
          </LinkTo>
        </li>
      </dd.Content>
    </Dropdown>
  </div>
</div>

<div class='white-rows'>
  {{#each this.model as |category|}}
    <div class='row' data-test-category={{category.slug}}>
      <div class='desc'>
        <div class='info'>
          <LinkTo @route="category" @model={{category.slug}}>{{category.category}}</LinkTo>
          <span class='small' data-test-crate-count>
            {{ pluralize (format-num category.crates_cnt) "crate" }}
          </span>
        </div>
        <div class='summary'>
          <span class='small'>
            {{ category.description }}
          </span>
        </div>
      </div>
    </div>
  {{/each}}
</div>

<Pagination @pages={{this.pages}} @prevPage={{this.prevPage}} @nextPage={{this.nextPage}} />

<div class='categories-footer'>
  Want to categorize your crate?
  <a href='http://doc.crates.io/manifest.html#package-metadata'>Add metadata!</a>
</div>
